<template>
  <div class="api-group flex-row">
    <div class="api-group-list">
      <div class="group-item flex-row-center flex-row-between" v-for="(groupAlias, group) in groups" :key="group">
        <span class="click text-nowrap margin-right-5px" @click="$emit('change', group, groupAlias)">
          {{ group || "默认分组" }} <span class="aux">{{ groupAlias || "" }}</span>
        </span>
        <span class="flex-row-center ">
          <Icon class="icon-gray icon-small click margin-right-5px " type="edit" title="编辑" @click="setDesign(group, groupAlias)"></Icon>
          <Icon class="icon-gray icon-small click margin-right-5px" type="close" title="删除" @click="remove"></Icon>
        </span>
      </div>
    </div>
    <div class="api-group-design">
      <div class="api-group-design-head">
        <Icon v-if="!groupDesign" class="icon-gray click " type="add" title="编辑" @click="setDesign(group, groupAlias)"></Icon>
        <div v-if="groupDesign">
          {{ groupDesign.groupOld == null ? "新增" : "编辑 - " + (groupDesign.groupOld || "默认分组") }}
          <span class="aux">{{ groupDesign.groupAliasOld || "" }}</span>
        </div>
      </div>
      <div class="api-group-design-body" v-if="groupDesign">
        <div class="api-group-design-item text-nowrap  flex-row-center">
          分组名称 : <input placeholder="输入分组名称" maxlength="50" v-model="groupDesign.group" />
        </div>
        <div class="api-group-design-item  text-nowrap  flex-row-center">
          分组别名 : <input placeholder="输入分组别名" maxlength="50" v-model="groupDesign.groupAlias" />
        </div>
      </div>
      <div class="api-group-design-footer" v-if="groupDesign">
        <button class="btn" @click="groupDesign = null">取消</button> <button class="btn">确认</button>
      </div>
    </div>
  </div>
</template>
<script>
import ApiDebug from "./ApiDebug";
import tips from "./tips.js";
let components = { ApiDebug };
export default {
  components,
  emits: ["change"],
  data() {
    return {
      groupDesign: null
      // api: {}
    };
  },

  computed: {
    groups() {
      return {
        "": "",
        用户: "user"
      };
    }
  },
  mounted() {},
  methods: {
    setDesign(group, groupAlias) {
      this.groupDesign = {
        group,
        groupOld: group,
        groupAlias,
        groupAliasOld: groupAlias
      };
    },
    remove() {}
  }
};
</script>
<style>
.api-group {
  margin-top: 5px;
  left: 0;
  color: initial;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  box-shadow: 2px 4px 25px #dddd, 0 0 15px 1px #dddd;
  border-radius: 5px;

  overflow: auto;
}
.api-group-list {
  padding: 10px 5px;
}
.api-group-design {
  border-left: 1px solid #ddd;
  background-color: #fafafa;
}
.api-group-design-head {
  padding: 10px;
}
.api-group-design-item {
  margin-bottom: 10px;
}
.api-group-design-item input {
  margin-left: 5px;
}
.api-group-design-body {
  border-top: 1px solid #eee;
  padding: 10px;
  padding-bottom: 0;
}
.api-group-design-footer {
  text-align: right;
  padding: 10px 5px;
  padding-top: 0;
}
</style>
